<!--
 * @Author: your name
 * @Date: 2021-07-30 18:00:25
 * @LastEditTime: 2021-08-08 22:05:16
 * @LastEditors: luojie
 * @Description: In User Settings Edit
 * @FilePath: /szjzglfxgl/src/packageAlpha/pages/faceCollect/index.vue
-->
<template>
  <view class="page-container">
    <uni-forms
      :value="formData"
      ref="form"
      validate-trigger="bind"
      err-show-type="undertext"
      class="form-box"
    >
      <uni-group top="0">
        <view class="baseinfo-row">
          <view class="label">证件类型</view>
          <view class="value">{{ formData.cardType | cardTypeFilter }}</view>
        </view>
        <view class="baseinfo-row">
          <view class="label">证件号码</view>
          <view class="value">{{ formData.idCard }}</view>
        </view>
        <view class="baseinfo-row">
          <view class="label">姓名</view>
          <view class="value">{{ formData.realName }}</view>
        </view>
        <view class="baseinfo-row">
          <view class="label">手机号</view>
          <view class="value">{{ formData.telPhone }}</view>
        </view>
        <view class="divi-br"></view>
        <view class="colle-title"
          >头像采集：<view class="btm-border"></view
        ></view>
        <view class="collect-box" @click="chooseImg">
          <!-- <uni-icons color="#fff" :size="40" type="plusempty"/> -->
          <image
            v-if="!interfaceBackData.fileUrl"
            class="upload-icon"
            src="https://szgd-dev.tgovcloud.com/public/images/referral/icon-upload.png"
            mode="widthFix"
          ></image>
          <text v-if="!interfaceBackData.fileUrl">请上传清晰的照片</text>
          <!-- :src="'data:image/jpg;base64,' + interfaceBackData.data" -->
          <image
            v-show="interfaceBackData.fileUrl"
            :src="interfaceBackData.fileUrl"
            mode="widthFix"
            class="person-photo"
          ></image>
        </view>

      </uni-group>
    </uni-forms>
    <view class="wrap-btn"  v-if="!isDisabled">
      <button @click="submit" class="submit-btn">提交</button>
    </view>

  </view>
</template>

<script type="text/ecmascript-6">
import {getData, getUserInfoByCardId} from '@/api';
import { cardTypes } from "@/data";
export default {

name: '',

data () {
  return {
    formData: {
      realName: '',
      idCard: '',
      telPhone: '',
      cardType: '',
    },
    interfaceBackData: {},
    isDisabled: false,  // 头像采集只做一次
    submitFlag: false,
  }
},

props: {},

created () {

},

filters: {
  cardTypeFilter(value) {
    const typeObj = cardTypes.find(obj => obj.value === value);
    return typeObj ? typeObj.label : '';
  }
},

mounted () {

},

onLoad(ev){
  this.getBaseInfo(ev);
},

methods: {
  getBaseInfo(ev){
    console.log('ev=====', ev);
    this.formData={
      cardType: ev.cardType,
      idCard: ev.idCard,
      realName: ev.realName,
      telPhone: uni.getStorageSync('telPhone')
    }
    let faceLastRecord=uni.getStorageSync('faceLastRecord')||{}
    if(faceLastRecord.fileUrl){
      this.interfaceBackData={
        // ...faceLastRecord,
        // data: faceLastRecord.face,
        // fileId: faceLastRecord.fileId,
        fileUrl: faceLastRecord.fileUrl
      }
      this.isDisabled=true;
    }
    this.submitFlag=false;
  },

  chooseImg(){
    if(this.isDisabled){
      return ; 
    }
    uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        // sourceType: ['album'], //从相册选择
        success:  (res)=> {
            console.log('选择图片====', res);
            this.uploadImg(res);
        }
    });
  },

  uploadImg({tempFilePaths}){
    let url= process.env.VUE_APP_BASE_URL + '/face-collect/face-detect';
    let token = uni.getStorageSync('token');
    uni.showLoading();
    uni.uploadFile({
      url,
      filePath: tempFilePaths[0],
      name: 'file',  //后台接收字段名
      formData: {},
      header:{
        "Content-Type": "multipart/form-data",
        'x-token': token || '1234567890'
      },
      success: (res) => {
        uni.hideLoading()
        let result=JSON.parse(res.data||'{}')
        console.log('上传===', result)
        if (result.code == 200){
          let dataObj=result.data;
          if(dataObj.respCode==10000000){
            this.interfaceBackData=dataObj.data;
            
          }else {
            uni.showToast({
              title: dataObj.respMessage||'图片上传失败',
              icon:'none',
              duration: 2000
            })
          }
        }

      },
      fail:(err)=>{
        uni.hideLoading()
        console.log('请求失败_______________',err)
      }
    })
  },
  
  submit(){
    if(this.submitFlag) {
      console.log('======防止重复点击========')
      return;
    }
    this.submitFlag=true;
    if(!this.interfaceBackData.fileUrl){
      uni.showToast({
        icon: "none",
        title: "请先上传照片" ,
      });
      return;
    }
    let data={
      "cardType": this.formData.cardType,
      "cid": this.formData.idCard,
      "face": this.interfaceBackData.data,
      "fileId": this.interfaceBackData.fileId,  // fileId
      "fileUrl": this.interfaceBackData.fileUrl,  // fileUrl
      "personName": this.formData.realName,
      "phone": this.formData.telPhone
    }
    uni.showLoading();
    getData('faceCollSave', 'post', data).then(res => {
      console.log('保存key=====')
      uni.setStorageSync('faceLastRecord', {
          fileUrl: data.fileUrl
      })
      uni.navigateTo({
        url: '/packageAlpha/pages/faceCollect/success'
      })
    }).catch(err=>{
    }).finally(()=>{
      console.log('======finally======')
      this.submitFlag=false;
      setTimeout(function(){
        uni.hideLoading();
      },3000)
    })
  },

},

components: { },

watch: {}

}
</script>

<style scoped lang="scss">
.page-container {
  background: #f9f9f9;
  padding-bottom: 50rpx;
  overflow-x: hidden;
}
.form-box {
  .page-head {
    display: flex;
    justify-content: space-between;
    height: 60rpx;
    align-items: center;
  }
  .divi-br {
    height: 30rpx;
    background-color: #f9f9f9;
    width: 200vw;
    transform: translateX(-100vw);
  }
  .colle-title {
    // padding: 30rpx 0;
    height: 98rpx;
    line-height: 98rpx;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    background: #ffffff;
    position: relative;
    & > .btm-border {
      height: 2rpx;
      background-color: #f4f4f4;
      left: -60rpx;
      position: absolute;
      bottom: 0;
      width: 200vw;
    }
  }
  .collect-box {
    margin-top: 30rpx;
    min-height: 330rpx;
    color: #fff;
    background: #f3f4f6;
    // border: 1px solid #2C9AF1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text {
      margin-top: 30rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
    .upload-icon {
      width: 44rpx;
      height: 44rpx;
      display: inline-block;
    }
    .person-photo {
      width: 100%;
    }
  }

  /deep/.uni-forms-item__inner {
    padding-bottom: 10rpx;
    padding-top: 10rpx;
  }
  .baseinfo-row {
    height: 96rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .label {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #999999;
    }
    .value {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666666;
    }
  }
}
.wrap-btn {
  padding: 0 30rpx;
  .submit-btn {
    // margin-top: 30rpx;
    margin-top: 70rpx;
    margin-bottom: 50rpx;
    color: #fff;
    height: 94rpx;
    background: #2c9af1;
    border-radius: 16rpx;
  }
}

.showCamera{
  box-sizing: border-box;
  padding: 0 72rpx;
  margin-top: 50rpx;
  .show-btn{
    background: pink;
    height: 94rpx;
    width: 100%;
    border-radius: 16rpx;
    color: #fff;
  }
}
.cameraModal{
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: black;
  .icon-close{
    position: fixed;
    width: 50rpx;
    height: 50rpx;
    top: 20rpx;
    right: 20rpx;
    opacity: 0.8;
    border-radius: 50%;
    .icon-img{
      width: 100%;
      height: 100%;
    }
  }
}

.primary-border{
  position: fixed;
  width: 202rpx;
  height: 202rpx;
  line-height: 210rpx;
  background:rgba(255,255,255,0.7);
  bottom: 40rpx;
  left: 50%;
  border-radius: 50%;
  margin-left: -100rpx;
  border: 7rpx solid rgba(255,255,255,0.4);
}
.primary{
  width: 200rpx;
  height: 200rpx;
  line-height: 200rpx;
  border-radius: 50%;
  background:rgba(255,255,255,0.7);
  color: #ccc;
  border: 5rpx solid rgba(0,0,0,0.4);
}
</style>
